<template>
  <el-main>
    <header>
      <el-row :gutter="20">
        <el-col :span="2">
          <div class="">
            <span>型号搜索:</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="">
            <el-input v-model="equipmentName" placeholder="请输入"></el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="">
            <el-button @click="searchFn" type="primary" icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="14">
          <div class=""></div>
        </el-col>
      </el-row>
    </header>
    <main>
      <div class="top">
        <el-button icon="el-icon-circle-plus-outline" @click="change('')">新建</el-button>
      </div>
      <div class="middle">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="no" label="序号"> </el-table-column>
            <el-table-column prop="name" label="型号名称"> </el-table-column>
            <el-table-column prop="model" label="型号编码"> </el-table-column>
            <el-table-column prop="image" label="设备图片">
              <template slot-scope="scope">
                <el-avatar :src="scope.row.image"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="vmRow" label="货道行"> </el-table-column>
            <el-table-column prop="vmCol" label="货道列"> </el-table-column>
            <el-table-column prop="channelMaxCapacity" label="设备容量"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="change(scope.row.name)">修改</el-button>
                <el-button style="color: #ff5a5a; margin-left: 10px" type="text" @click="del">删除</el-button>
              </template>
            </el-table-column>
            <el-dialog class="changeDialog" append-to-body title="修改设备类型" :visible.sync="dialogChange" width="35%" :modal-append-to-body="false">
              <el-form ref="formChange" class="formChange" :model="changeForm" :rules="changeFormRules">
                <el-form-item label="型号名称:" prop="name">
                  <el-input v-model="changeForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="型号编码:" prop="model">
                  <el-input v-model="changeForm.model" placeholder="请输入（限制数字、字母、中划线、下划线）"></el-input>
                </el-form-item>
                <el-form-item label="货道行数:" prop="vmRow">
                  <el-input-number v-model="changeForm.vmRow" placeholder="请输入" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="货道列数:" prop="vmCol">
                  <el-input-number v-model="changeForm.vmCol" placeholder="请输入" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="货道容量:" prop="channelMaxCapacity">
                  <el-input-number v-model="changeForm.channelMaxCapacity" placeholder="请输入" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="设备图片:" prop="image">
                  <el-upload class="avatar-uploader" action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
                  name="fileName"
                   :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="changeForm.image" :src="changeForm.image" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogChange = false">取 消</el-button>
                <el-button type="primary" @click="Change">确 定</el-button>
              </span>
            </el-dialog>
          </el-table>
        </template>
      </div>
      <div class="bottom">
        <span>共{{ search.totalCount }}条记录 第 {{ search.pageIndex }}/{{ search.totalPage }} 页</span>
        <el-button @click="onPage" :disabled="getSearchObj.pageIndex === 1">上一页</el-button>
        <el-button @click="bownPage" :disabled="getSearchObj.pageIndex == search.totalPage">下一页</el-button>
      </div>
    </main>
  </el-main>
</template>

<script>
import { getTypeSearch, getVmType, addVmType } from '@/api/equipment'
export default {
  data () {
    return {
      getSearchObj: {
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      search: {},
      equipmentName: '',
      changeForm: {
        channelMaxCapacity: '',
        image: '',
        model: '',
        name: '',
        no: '',
        typeId: '',
        vmCol: '',
        vmRow: ''
      },
      changeFormRules: {
        name: [{ required: true, message: '型号名称不能为空', trigger: ['blur', 'change'] }],
        model: [{ required: true, message: '型号编码不能为空', trigger: ['blur', 'change'] }],
        vmRow: [{ required: true, message: '货道行数不能为空', trigger: ['blur', 'change'] }],
        vmCol: [{ required: true, message: '货道列数不能为空', trigger: ['blur', 'change'] }],
        channelMaxCapacity: [{ required: true, message: '货道容量不能为空', trigger: ['blur', 'change'] }],
        image: [{ required: true, message: '请上传', trigger: ['blur', 'change'] }]
      },
      dialogChange: false
    }
  },
  created () {
    this.getTypeSearch(this.getSearchObj)
  },
  methods: {
    async getTypeSearch (getSearchObj) {
      const search = await getTypeSearch(getSearchObj)
      this.search = search
      console.log(this.search)
      search.currentPageRecords.forEach((item, index) => {
        this.tableData.push({
          no: search.pageIndex * 10 - 9 + index,
          name: item.name,
          model: item.model,
          image: item.image,
          vmRow: item.vmRow,
          vmCol: item.vmCol,
          channelMaxCapacity: item.channelMaxCapacity,
          typeId: item.typeId
        })
      })
    },
    async onPage () {
      this.getSearchObj.pageIndex--
      this.tableData = []
      this.getSearch(this.getSearchObj)
    },
    async bownPage () {
      this.getSearchObj.pageIndex++
      this.tableData = []
      this.getSearch(this.getSearchObj)
    },
    async searchFn () {
      const searchFnObj = this.getSearchObj
      this.$set(searchFnObj, 'name', this.equipmentName)
      this.tableData = []
      this.getTypeSearch(searchFnObj)
    },
    // async getTypeChange (getTypeChange) {
    //   const search = await getTypeSearch(getTypeChange)
    //   this.typeChange = search
    // },
    del () {
      this.$notify.info({
        title: '提示',
        message: '演示系统，不支持此操作'
      })
    },
    change (name) {
      this.dialogChange = true
      if (name) {
        const changeDate = this.tableData.filter((item) => item.name === name)
        this.changeForm = changeDate[0]
        console.log(this.changeForm)
      } else {
        this.changeForm = {
          channelMaxCapacity: '',
          image: '',
          model: '',
          name: '',
          no: '',
          typeId: '',
          vmCol: '',
          vmRow: ''
        }
        if (typeof this.$refs.formChange !== 'undefined') {
          this.$refs.formChange.resetFields()
        }
      }
    },
    async Change () {
      if (this.changeForm.typeId) {
        await getVmType(this.changeForm)
      } else {
        await addVmType(this.changeForm)
      }
      console.log(this.changeForm)
      this.dialogChange = false
    },
    handleAvatarSuccess (res, file) {
      this.changeForm.image = URL.createObjectURL(file.raw)
      // this.changeForm.image = res
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less" scoped>
.el-main {
  background-color: RGB(248, 250, 253);
  width: 89vw;
  height: 100%;
  header {
    background-color: #fff;
    height: 64px;
    margin-bottom: 20px;
    span {
      line-height: 64px;
      margin-left: 20px;
    }
    .el-input {
      margin-top: 12px;
    }
    button {
      background-color: RGB(95, 132, 255);
      margin-top: 10px;
    }
  }
  main {
    background-color: #fff;
    padding: 20px 15px 19px 17px;
    .top {
      margin-bottom: 20px;
      button {
        border: none;
      }
      button:nth-child(1) {
        color: #fff;
        background: linear-gradient(135deg, #ff9743, #ff5e20);
      }
      button:nth-child(2) {
        background-color: #fbf4f0;
      }
    }
    .middle {
      /deep/ td {
        border-bottom: 0px solid #ebeef5;
      }
      /deep/ th {
        background-color: RGB(243, 246, 251);
        font-weight: 400;
        color: #333;
      }
    }
    .bottom {
      padding: 32px 16px;
      display: flex;
      span {
        flex: 1;
        font-size: 16px;
        color: #dbdfe5;
      }
      button {
        border: none;
        background-color: #d5ddf8;
      }
    }
  }
}
</style>
